import {connect} from 'dva';
import React, {PureComponent} from 'react';
import {Form, Input, Button, Upload, Tooltip, Cascader, message, Switch, Icon, Select, Radio, Modal} from 'antd';
import styles from './UsercreateModal.less';
import ServiceUserTable from '../ServiceUserTable'

const FormItem = Form.Item;
const Option = Select.Option;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
@connect(state => ({
    service_order: state.service_order,
}))
@Form.create()
export default class ChooseUserModal extends PureComponent {
    state = {
        service_id: [],
        worker_leader: '',
        work_time: "",
        options: [],
        filteredInfo: null,
        sortedInfo: null,
        pagination: null
    }
    handleSelectRows = (rows) => {
        this.setState({
            selectedRows: rows,
        });
    }


    handleStandardTableChange = (pagination, filtersArg, sorter) => {
        const {dispatch, item} = this.props;
        const {formValues} = this.state;

        console.log(item,formValues)

        this.setState({
            filteredInfo: filtersArg,
            sortedInfo: sorter,
        });
        if(formValues){
            if(formValues.service_id){
                formValues.service_id = formValues.service_id[formValues.service_id.length -1]
            }
        }
        let params = {
            order_id: item.id,
            ...formValues,
        };
        if (filtersArg) {
            const filters = Object.keys(filtersArg).reduce((obj, key) => {
                const newObj = {...obj};
                newObj[key] = getValue(filtersArg[key]);
                return newObj;
            }, {});
            params = {
                order_id: item.id,
                ...formValues,
                ...filters,
            };
        }

        if (pagination) {
            params.page = pagination.current;
            params.size = pagination.pageSize;
        }
        if (sorter) {
            if (sorter.field) {
                console.log(sorter.order);
                // params.sorter = `${sorter.field}_${sorter.order}`;
                params.order = sorter.order;
                params.sorter = sorter.field;
            }
        }
        params.city = item.city
        dispatch({
            type: 'service_order/fecthSupports',
            payload: params,
        });
    }
    onSend = (user_id) => {
        const {dispatch, item} = this.props;
        console.log(user_id);
        if (this.props.item.order_status == 0) {
            dispatch({
                type: 'service_order/saveSupportChange',
                payload: {user_id: user_id}
            })

        }

    }

    componentDidMount() {
        const {dispatch, item} = this.props;
        dispatch({
            type: 'service_order/fetchCategories',
            callback: () => {

            }
        })
    }

    handleSubmit = (e) => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.state.formValues = values
                this.handleStandardTableChange(this.state.pagination, this.state.filteredInfo, this.state.sortedInfo)
            }
        });
    }

    handleCancel = () => {
        this.props.dispatch({
            type: 'service_order/changeChooseVisible',
            payload: false,
            callback: () => {
                console.log('回调');
            },
        });
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const item = this.state.item;
        const {service_order: {users, loading, categories, chooseUserVisible}} = this.props;
        const options = this.state.options;

        const formItemLayout = {
            labelCol: {
                span: 10,
            },
            wrapperCol: {
                span: 14,
            },
        };
        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };
        return (
            <Modal
                onCancel={this.handleCancel}
                title="选择零工师傅"
                width={1000}
                visible={chooseUserVisible}
            >
                <Form layout="inline" onSubmit={this.handleSubmit}>
                    <FormItem
                        {...formItemLayout}
                        label={
                            <span>
                  服务类别
                  <em className={styles.optional}>
                      &nbsp;
                      <Tooltip title="选择服务类别">
                      <Icon type="info-circle-o" style={{marginRight: 4}}/>
                    </Tooltip>
                  </em>
                    </span>
                        }
                    >
                        {getFieldDecorator('service_id', {initialValue: this.state.service_id})(
                            <Cascader placeholder="服务类别" options={categories} changeOnSelect/>
                        )}
                    </FormItem>
                    <FormItem
                        style={{width: 200}}
                        {...formItemLayout}
                        label={
                            <span>
                  是否工长
                  <em className={styles.optional}>
                      &nbsp;
                      <Tooltip title="邀请工友达到三位，工友队伍包含五个一级工种，完成订单达到十个">
                      <Icon type="info-circle-o" style={{marginRight: 4}}/>
                    </Tooltip>
                  </em>
                    </span>
                        }
                    >
                        {getFieldDecorator('worker_leader')(
                            <Select allowClear>
                                <Option key={0}>普通零工</Option>
                                <Option key={1}>工长</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem
                        style={{width: 200}}
                        {...formItemLayout}
                        label="工作时间"
                    >
                        {getFieldDecorator('work_time')(
                            <Select allowClear>
                                <Option key='白天'>白天</Option>
                                <Option key='全天'>全天</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" htmlType="submit" loading={loading}>
                            提交
                        </Button>
                        <Button onClick={() => {
                            this.props.form.resetFields();
                        }} style={{marginLeft: 8}}>重置</Button>
                    </FormItem>
                </Form>
                <ServiceUserTable
                    loading={loading}
                    data={users}
                    onSend={this.onSend}
                    onChange={this.handleStandardTableChange}/>
            </Modal>
        );
    }
}

